<template>
  <div class="room-area">
    <!-- 1.区域header -->
    <area-header
      :title="areaData.title"
      :subtitle="areaData.subtitle"
    ></area-header>
    <!-- 2.区域列表 -->
    <div class="room-list">
      <template v-for="item in areaData.list" :key="item.id">
        <room-item :item-data="item"></room-item>
      </template>
    </div>
  </div>
</template>
<script setup>
import areaHeader from "./area-header.vue";
import roomItem from "./room-item.vue";
import { reactive, ref } from "vue";

defineProps({
    areaData:{
        type:Object,
        default:()=>({})
    }
})
</script>
<style lang="less" scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
.room-list {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -8px;
}
</style>
